<template>
    <div class="common-layout">
        <el-container>
            <el-header style="border: groove; border-width: 2px; height: 150px; width: 100%; margin-top: 10px;">
                <div
                    style="display: flex; align-items: center; background-color: #f5f7fa; padding: 10px; border: 1px solid #e4e7ed; border-radius: 4px; margin-bottom: 10px;">
                    <el-icon style="margin-right: 8px; color: #666;">
                        <Filter />
                    </el-icon>
                    <span>筛选</span>
                </div>
                <el-form :inline="true" v-model="query" class="demo-form-inline" style="margin-top: 15px;">
                    <el-form-item label="标题：">
                        <el-input v-model="query.title" placeholder="输入标题或关键字" clearable style="width: 150px;" />
                    </el-form-item>
                    <el-form-item label="上传时间">
                        <el-col :span="11">
                            <el-date-picker v-model="query.settime" type="date" placeholder="开始时间"
                                style="width: 150px" />
                        </el-col>
                        <el-col :span="2" class="text-center">
                            <span class="text-gray-500">-</span>
                        </el-col>
                        <el-col :span="11">
                            <el-date-picker v-model="query.enttime" type="date" placeholder="开始时间"
                                style="width: 150px" />
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="carouselist">筛选</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main style="border: groove; border-width: 2px; height: 700px; width: 100%; margin-top: 20px; ">
                <div
                    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; background-color: #f5f7fa; padding: 10px; border: 1px solid #e4e7ed; border-radius: 4px;">
                    <span>轮播图列表</span>
                    <el-button type="primary" @click="towse(null)">新增轮播图</el-button>
                </div>
                <el-table :data="carousedata" border style="width: 1000px;margin-top: 25px;">
                    <el-table-column type="selection" width="选择" align="center" />
                    <el-table-column prop="title" label="轮播图标题" align="center" />
                    <el-table-column prop="imageUrl" label="缩略图" align="center">
                        <template v-slot="scoped">
                            <img :src="scoped.row.imageUrl" style="width: 100px; height: 100px;" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center">
                        <template v-slot="scoped">
                            <el-tag v-if="scoped.row.status == 1" type="success">上架</el-tag>
                            <el-tag v-else type="danger">下架</el-tag>

                        </template>
                    </el-table-column>
                    <el-table-column prop="createName" label="上传人" align="center" />
                    <el-table-column prop="createTime" label="上传时间" align="center">
                        <template v-slot="scoped">
                            {{ scoped.row.createTime == null ? '暂无数据' : scoped.row.createTime.slice(0, 19).replace('T',
                                ' ') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template v-slot="scoped">
                            <el-button type="danger" @click="open(scoped.row.carouselId)" link>
                                删除
                            </el-button>
                            <el-button type="primary" @click="towse(scoped.row)" link>
                                修改
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div style="display: flex; justify-content: center; margin-top: 30px;">
                    <el-pagination v-model:current-page="page.Pagindex" v-model:page-size="page.Pagsize"
                        :page-sizes="[3, 5, 10]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="page.totalcount" />
                </div>
            </el-main>
        </el-container>
    </div>
    <el-dialog v-model="setting.isOpen" :title="setting.istite" width="500" align-center draggable>
        <el-form>
            <el-form-item label="轮播图标题">
                <el-input v-model="carousadd.title" />
            </el-form-item>
            <el-form-item label="轮播图">
                <el-upload class="avatar-uploader" v-model="carousadd.imageUrl"
                    action="http://localhost:5047/api/carousimg/CarousImg" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="carousadd.imageUrl" :src="carousadd.imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="轮播图状态">
                <el-radio-group v-model="carousadd.status">
                    <el-radio :value="1">上架</el-radio>
                    <el-radio :value="2">下架</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="轮播图链接地址">
                <el-input v-model="carousadd.jumpUrl" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="carousadd.counts" /> 填写数字，数字越大越靠前
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="setting.isOpen = false">取消</el-button>
                <el-button type="primary" @click="carousdata">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { Filter, RefreshRight } from '@element-plus/icons-vue'
import { Read, Write } from '@/Http/Axios'
import { ElMessage, ElMessageBox, type UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()
//分页参数
const page = reactive({
    Pagindex: 1,
    Pagsize: 3,
    totalcount: 0,
    totalsize: 0,
})

//查询参数
const query = reactive({
    title: '',
    settime: '',
    enttime: '',
})
//表格数据
const carousedata = ref([
    {
        "carouselId": 0,
        "title": "",
        "imageUrl": "",
        "jumpUrl": "",
        "startTime": "",
        "endTime": "",
        "status": 0,
        "createTime": "",
        "isDeleted": false
    }
])

const carouselist = () => {
    Read.get("/CarouselShow", {
        params: {
            Title: query.title,
            settime: query.settime,
            enttime: query.enttime,
            Pagindex: page.Pagindex,
            Pagsize: page.Pagsize,
        },
    }).then(res => {
        carousedata.value = res.data.data.fdata
        console.log(res.data.data.fdata);
        page.totalcount = res.data.data.totalCount
        page.totalsize = res.data.data.totalPage
    })
}

const setting = reactive({
    isOpen: false,
    istite: "新增轮播图",
    isEdit: false,
})
const carousadd = reactive({
    "carouselId": 0,
    "title": "",
    "imageUrl": "",
    "jumpUrl": "",
    "startTime": "2025-10-30T06:24:13.805Z",
    "endTime": "2025-10-30T06:24:13.805Z",
    "status": 0,
    "createTime": "2025-10-30T06:24:13.805Z",
    "isDeleted": true,
    "counts": 0,
    "createName": store.account.UserNickName,
})

const towse = (t: any) => {
    setting.isOpen = true
    if (t == null) {
        carousadd.title = ""
        carousadd.imageUrl = ""
        carousadd.jumpUrl = ""
        carousadd.counts = 0
        carousadd.status = 1
        setting.istite = "新增轮播图"
        setting.isEdit = false
        carousadd.createTime = "2025-10-30T06:24:13.805Z"
        carousadd.createName = store.account.UserNickName

        carousadd.isDeleted = true
    }
    else {
        carousadd.title = t.title
        carousadd.imageUrl = t.imageUrl
        carousadd.jumpUrl = t.jumpUrl
        carousadd.counts = t.counts
        carousadd.status = t.status
        carousadd.createTime = t.createTime
        carousadd.createName = t.createName
        carousadd.isDeleted = t.isDeleted
        setting.istite = "编辑轮播图"
        setting.isEdit = true
        carousadd.carouselId = t.carouselId
    }
}

//添加方法
const carousdata = () => {
    if (setting.isEdit == true) {
        Write.put("/UpdateCarousel", carousadd).then(res => {
            if (res.data.code == 300) {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
                setting.isOpen = false
                carouselist();
            }


        })
    }
    else if (setting.isEdit == false) {
        Write.post("/AddCarousel", carousadd).then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                })
                setting.isOpen = false
                carouselist();
            }


        })
    }
}
//删除方法
const open = (t: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            Write.delete("DeleteCarousel", {
                data: {
                    carouselId: t
                }
            }).then(res => {
                if (res.data.code == 400) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    carouselist()
                }

            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}

//钩子函数
onMounted(() => {
    carouselist()
})

//侦听器
watch(page, () => {
    carouselist()

})

const imageUrl = ref('')

const handleAvatarSuccess = (t: any) => {
    carousadd.imageUrl = t
}



const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    // if (rawFile.type !== 'image/jpeg') {
    //     ElMessage.error('Avatar picture must be JPG format!')
    //     return false
    // } else if (rawFile.size / 1024 / 1024 > 2) {
    //     ElMessage.error('Avatar picture size can not exceed 2MB!')
    //     return false
    // }
    return true
}

</script>



<style scoped>
::v-deep(.el-table th) {
    background-color: #f5f7fa !important;
    color: #333 !important;
    font-weight: 500;
    border-bottom: 1px solid #e4e7ed !important;
}

::v-deep(.el-table .cell) {
    padding: 12px 0;
}

.table-center {
    ::v-deep(.el-table th) {
        text-align: center !important;
    }
}

::v-deep(.el-table th) {
    background-color: #f5f7fa !important;
    color: #333 !important;
    font-weight: 500;
    border-bottom: 1px solid #e4e7ed !important;
    text-align: center !important;
    /* 强制表头居中 */
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
